<div class="shadow"></div>
<div class="application-modal-content">
  <a href="#" class="btn-direction is-left" data-dir="left"><div class="icon"><svg><use xlink:href="#shape-arrow-left"></use></svg></div></a>
  <a href="#" class="btn-direction is-right" data-dir="right"><div class="icon"><svg><use xlink:href="#shape-arrow-right"></use></svg></div></a>
  <a href="#" class="close"><svg><use xlink:href="#shape-close"></use></svg></a>
  <div class="application-modal-header">
    <div class="icon"><svg><use xlink:href="{{app.svg}}"></use></svg></div>
    <header>
      <h2>{{app.name}}</h2>
      <small>{{app.source}}</small>
    </header>
  </div>
  <div class="application-modal-info">
    <p>{{app.content}}</p>
    {{#if app.tags}}
    <div class="application-modal-info--tags">
      Tags: {{#each app.tags}}{{#if @first}}{{this}}{{else}}, {{this}}{{/if}}{{/each}}
    </ul>
    {{/if}}
  </div>
  <footer>
    {{#if app.href}}
    <a href="{{app.href}}" {{#if app.target}}target="_blank"{{/if}} class="{{app.classname}}">{{app.link_text}}</a>
    {{else}}
    <span class="{{app.classname}}">{{app.link_text}}</span>
    {{/if}}
  </footer>
</div>
